<template>
  <div class="ctArea">
    <div class="my-tab-box">
      <span
        class="left-a"
        :class="{active:indexs==0}"
        @click="initDiagramChart(0)"
      >{{$t("ctArea.llung")}}</span>
      <span
        class="right-a"
        :class="{active:indexs==1}"
        @click="initDiagramChart(1)"
      >{{$t("ctArea.rlung")}}</span>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
import { getCtvalue } from "@/api/highchat";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);
export default {
  name: "ctArea",
  data() {
    return {
      diagramChart: null,
      ctvalueL: [],
      ctcountL: [],
      ctvalueR: [],
      ctcountR: [],
      indexs: 0
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取chart数据
    getData() {
      getCtvalue(this.dsId).then(res => {
        if (res.status.code == 200) {
          this.ctvalueL = JSON.parse(res.data.ctvalueL);
          this.ctcountL = JSON.parse(res.data.ctcountL);
          this.ctvalueR = JSON.parse(res.data.ctvalueR);
          this.ctcountR = JSON.parse(res.data.ctcountR);
          this.initDiagramChart(0);
        }
      });
    },
    //初始化曲线图
    initDiagramChart(indexs) {
      this.indexs = indexs;
      let data1 = [];
      let data2 = [];
      let value = [];
      if (indexs == 0) {
        value = this.ctvalueL;
        data1 = this.ctcountL;
        for (let i = 0; i < this.ctcountL.length; i++) {
          if (i != 0) {
            data2.push(this.ctcountL[i]);
          }
        }
      } else {
        value = this.ctvalueR;
        data1 = this.ctcountR;
        for (let i = 0; i < this.ctcountR.length; i++) {
          if (i != 0) {
            data2.push(this.ctcountR[i]);
          }
        }
      }

      this.diagramChart = Highcharts.chart("container", {
        chart: {
          zoomType: "xy",
          backgroundColor: "#ffffff",
          height: 280
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        subtitle: {
          text: ""
        },
        xAxis: [
          {
            categories: value,
            crosshair: true,
            lineColor: "#252525",
            labels: {
              style: {
                fontSize: "12px",
                color: "#252525"
              }
            }
          }
        ],
        yAxis: [
          {
            // Primary yAxis
            labels: {
              formatter: function() {
                return this.value / 10000 + (this.value == 0 ? "mm³" : "w mm³");
              },
              style: {
                fontSize: "12px",
                color: "#252525"
              }
            },
            title: {
              text: "",
              style: {
                fontSize: "12px",
                color: "#252525"
              }
            }
          },
          {
            // Secondary yAxis
            title: {
              text: "",
              style: {
                fontSize: "12px",
                color: "#252525"
              }
            },
            labels: {
              formatter: function() {
                return this.value / 10000 + (this.value == 0 ? "mm³" : "w mm³");
              },
              style: {
                fontSize: "12px",
                color: "#252525"
              }
            },
            opposite: true,
            gridLineColor: "#252525"
          }
        ],
        tooltip: {
          shared: true
        },
        legend: {
          labelFormatter: function() {
            return '<span style="color:#252525"> ' + this.name + "</span>";
          },

          align: "left",
          verticalAlign: "top",
          x: -10,
          y: 0
        },
        series: [
          {
            name: this.$t("ctArea.title2"),
            type: "column",
            yAxis: 1,
            data: data1,
            tooltip: {
              valueSuffix: "mm³"
            },
            color: "#4c74cd",
            borderColor: "#6e85e4"
          },
          {
            name: this.$t("ctArea.title3"),
            type: "spline",
            data: data2,
            tooltip: {
              valueSuffix: "mm³"
            },
            color: "#c6393c"
          }
        ]
      });
    }
  },
  props: ["dsId"]
};
</script>
<style scoped lang="scss">
.ctArea {
  position: relative;
  .my-tab-box {
    position: absolute;
    top: -28px;
    right: 5px;
    border: 1px solid #686868;
    border-radius: 4px;
    padding: 3px 0;
    background: #ffffff;
    .left-a {
      font-size: 12px;
      line-height: 16px;
      padding: 0 5px;
      color: #cccccc;
      float: left;
      border-right: 1px solid #686868;
      &.active {
        color: #5573d0;
      }
    }
    .right-a {
      font-size: 12px;
      line-height: 16px;
      padding: 0 5px;
      color: #cccccc;
      float: left;
      &.active {
        color: #5573d0;
      }
    }
  }
}
</style>